<template>
  <div class="y-exhibition">
    <div class="user-voice">
      <span class="voice-title">用户的声音</span>
      <span class="voice-info">听听爱玖优行带给他们什么样的旅行</span>
    </div>
    <div class="voice-wrap">
      <div class="voice-list">
        <div class="voice-box" v-for="(voice,index) in voices">
          <div class="voice-cover">
            <div :class="['cover-bgimg',voice.imgclass]"></div>
          </div>
          <div class="voice-cont">
            <div class="voice-cont-header">
              <div class="voice-cont-header-name">{{voice.name}}</div>
            </div>
            <div class="voice-cont-article">{{voice.des}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="company-solgan">
      <img
        width="100%"
        height="130"
        style="margin-bottom:40px;"
        :src="require('../assets/img/slogan.png')"
        alt
      >
    </div>
  </div>
</template>

<script>
import { CarMixin } from '../util/mixin.js'
export default {

  mixins:[CarMixin]
  

};
</script>

<style lang="scss" scoped>
.y-exhibition {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #0f0f0f;
  .user-voice {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 600px;
    padding: 1rem 1.2rem 1rem 1.2rem;
    .voice-title {
      font-family: PingFangSC-Regular;
      font-size: 20px;
      color: #f4f4f4;
    }
    .voice-info {
      margin-top: 10px;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #f4f4f4;
    }
  }
  .voice-wrap {
    position: relative;
    width: 100vw;
    height: 100vw;
    max-height: 400px;
    max-width: 600px;
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    .voice-list {
      position: relative;
      height: 100%;
      padding-left: 0.6rem;
      margin-right: 0.6rem;
      display: -webkit-box;
      display: -ms-flexbox;
      // display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-flow: row nowrap;
      .voice-box {
        position: relative;
        display: block;
        margin-right: 1rem;
        height: 100%;
        > div {
          border: 1px solid #f6b622;
          border-radius: 0.5rem;
        }

        &:last-child {
          border-right: 0.5rem solid transparent;
        }
        .voice-cover {
          position: relative;
          display: block;
          width: 65vw;
          height: 65vw;
          max-width: 300px;
          overflow: hidden;
          .cover-bgimg {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 0.5rem;
            min-height: 20px;
            min-width: 20px;
            background-size: cover;
            background-repeat: no-repeat;
            &.img1 {
              background-image: url('../assets/img/car1-min.jpeg');
            }
            &.img2 {
              background-image: url('../assets/img/car2-min.jpeg');
            }
            &.img3 {
              background-image: url('../assets/img/car3-min.jpeg');
            }
            &.img4 {
              background-image: url('../assets/img/car4-min.jpeg');
            }
            &.img5 {
              background-image: url('../assets/img/car5-min.jpeg');
            }
            &.img6 {
              background-image: url('../assets/img/car6-min.jpeg');
            }
          }
        }
        .voice-cont {
          position: absolute;
          width: 60vw;
          bottom: 0;
          left: 3.5%;
          height: 40%;
          background-color: #fff;
          z-index: 1;
          overflow: hidden;
          .voice-cont-header {
            margin: 0.4rem 0.5rem;
            display: -webkit-box;
            display: flex;
            -webkit-box-pack: justify;
            justify-content: space-between;
            .voice-cont-header-loc {
              color: #251e1b;
              font-size: 16px;
            }
            .voice-cont-header-name {
              color: #251e1b;
              font-size: 14px;
            }
          }
          .voice-cont-article {
            font-size: 3.1vw;
            line-height: 4.4vw;
            margin: 0 0.4rem;
            text-align: left;
            color: #848383;
          }
        }
      }
    }
  }
  .company-solgan {
    height: 120px;
    text-align: center;
  }
}
</style>
